<template>
  <el-space :fill="true">
    <el-card>
      <el-space :size="'large'">
        <el-text class="mx-1">系统：{{ data.sys?.os }}</el-text>
        <el-text class="mx-1">IP：{{ data.sys?.ip }}</el-text>
        <el-text class="mx-1">系统已持续运行：{{ data.sys?.day }}</el-text>
      </el-space>
    </el-card>
    <el-card>
      <template #header>状态</template>
      <el-row>
        <el-col :span="6">
          <el-row :justify="'center'">
            <el-text>磁盘使用率</el-text>
          </el-row>
          <el-row :justify="'center'">
            <el-progress type="dashboard" :percentage="data.disk?.usageRate" />
          </el-row>
          <el-row :justify="'center'">
            <el-text>{{ data.disk?.used }}/{{ data.disk?.total }}</el-text>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row :justify="'center'">
            <el-text>内存使用率</el-text>
          </el-row>
          <el-row :justify="'center'">
            <el-progress type="dashboard" :percentage="data.memory?.usageRate" />
          </el-row>
          <el-row :justify="'center'">
            <el-text>{{ data.memory?.used }}/{{ data.memory?.total }}</el-text>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row :justify="'center'">
            <el-text>CPU使用率</el-text>
          </el-row>
          <el-row :justify="'center'">
            <el-progress type="dashboard" :percentage="data.cpu?.used" />
          </el-row>
          <el-row :justify="'center'">
            <el-text>{{ data.cpu?.coreNumber }}</el-text>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row :justify="'center'">
            <el-text>交换区使用率</el-text>
          </el-row>
          <el-row :justify="'center'">
            <el-progress type="dashboard" :percentage="data.swap?.usageRate" />
          </el-row>
          <el-row :justify="'center'">
            <el-text>{{ data.swap?.used }}/{{ data.swap?.total }}</el-text>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
  </el-space>
</template>

<script setup lang="ts">
import ResourceApi, { ServerResourceModel } from "@/api/monitor/resource";
const data = ref<ServerResourceModel>({});

const intervalId = ref();
onMounted(async () => {
  await query();

  intervalId.value = setInterval(async () => {
    await query();
  }, 5000);
});

onUnmounted(() => {
  if (intervalId.value) {
    clearInterval(intervalId.value);
  }
});

const query = async () => {
  data.value = await ResourceApi.query();
};
</script>

<style lang="scss" scoped>
.el-space {
  display: flex;
}
</style>
